<template>
  <div class="c2cTrade">
    <Other-Header index="1" bgColor="#5741d9"></Other-Header>
    <div class="mainSection orderSection">
      <div class="inner">
        <h2 class="title">{{$t('l.appeal_about9')}}</h2>

        <!-- 订单头部 -->
        <h3 class="orderHeader">
          <div class="orderTitle">
            <template v-if="orderinfo.orderType==1">{{$t('l.order_about0a', [orderinfo.another])}}</template>
            <template
              v-else-if="orderinfo.orderType==2"
            >{{$t('l.order_about0b', [orderinfo.another])}}</template>
            <template
              v-else-if="orderinfo.orderType==3"
            >{{$t('l.order_about47a', [orderinfo.another])}}</template>
            <template
              v-else-if="orderinfo.orderType==4"
            >{{$t('l.order_about47b', [orderinfo.another])}}</template>
            <span class="orderAmount">
              <em>{{orderinfo.quantity}}</em>
              {{orderinfo.currencyCode}}
            </span>
          </div>
        </h3>

        <!-- 交易信息 -->
        <div class="orderBox priceAbout clearfix" style="margin-top: 25px;">
          <div class="boxInner">
            <div class="boxRow">
              <div class="boxCol fl wid33" style="border-right:1px solid #e7e7e7">
                <span class="titleName">{{$t('l.order_about9')}}</span>
                <br />
                <span>{{orderinfo.totalPrice}} {{orderinfo.legalCurrencyCode}}</span>
              </div>
              <div class="boxCol fl wid33" style="border-right:1px solid #e7e7e7">
                <span class="titleName">{{$t('l.order_about11')}}</span>
                <br />
                <span>{{orderinfo.price}} {{orderinfo.legalCurrencyCode}}</span>
              </div>
              <div class="boxCol fl wid33">
                <span class="titleName">{{$t('l.order_about10')}}</span>
                <br />
                <span>{{orderinfo.quantity}} {{orderinfo.currencyCode}}</span>
              </div>
            </div>
            <div class="boxRow">
              <div class="boxCol fl wid33" style="border-right:1px solid #e7e7e7">
                <span class="titleName">{{$t('l.order_about1')}}</span>
                <br />
                <span>{{orderinfo.orderNo}}</span>
              </div>
              <div class="boxCol fl wid33" style="border-right:1px solid #e7e7e7">
                <span class="titleName">{{$t('l.order_about13')}}</span>
                <br />
                <span>
                  <span class="paybox">
                    <img v-if="orderinfo.payMode==1" src="../../assets/images/pay_zfb.png" alt />
                    <img
                      v-else-if="orderinfo.payMode==2"
                      src="../../assets/images/pay_weixin.png"
                      alt
                    />
                    <img
                      v-else-if="orderinfo.payMode==3"
                      src="../../assets/images/pay_cards.png"
                      alt
                    />
                  </span>
                  {{orderinfo.payMode==1 ? $t('l.order_about13a') : (orderinfo.payMode==2 ? $t('l.order_about13b') : $t('l.order_about13c'))}}
                </span>
              </div>
              <div class="boxCol fl wid33">
                <span class="titleName">{{$t('l.order_about56')}}</span>
                <br />
                <span v-if="orderinfo.status==1" class="color-paid">{{$t('l.order_list16')}}</span>
                <span v-else-if="orderinfo.status==2" class="color-confirm">{{$t('l.order_list17')}}</span>
                <span
                  v-else-if="orderinfo.status==3"
                  class="color-cancelled"
                >{{$t('l.order_list19')}}</span>
                <span v-else-if="orderinfo.status==4">{{$t('l.order_list20')}}</span>
                <span
                  v-else-if="orderinfo.status==5"
                  class="color-completed"
                >{{$t('l.order_list18')}}</span>
              </div>
            </div>
          </div>
          <div class="fr tradeRate">
            <span>
              {{$t('l.order_about14a')}}
              <em>{{$t('l.order_about14b')}}</em>
            </span>
          </div>
        </div>

        <!-- 提交诉讼 -->
        <div class="orderBox appealAbout">
          <div class="title">
            {{$t('l.appeal_about2')}}
            <span
              v-show="(appealinfo.initiate == 1 && isSeller) || (appealinfo.initiate == 2 && !isSeller)"
            >（{{$t('l.appeal_about28')}}）</span>
          </div>
          <div class="boxInner">
            <div class="appealBox">
              <el-col :span="12">
                <div>
                  <span class="inlineCol title">{{$t('l.appeal_about10')}}</span>
                  <span class="inlineCol">{{appealinfo.title}}</span>
                </div>
                <div>
                  <span class="inlineCol title">{{$t('l.appeal_about11')}}</span>
                  <span class="inlineCol">{{appealinfo.descr}}</span>
                </div>
                <div>
                  <span class="inlineCol title">{{$t('l.appeal_about20')}}</span>
                  <span class="inlineCol" v-if="appealinfo.status==3">
                    <i class="icon-appeal icon-appeal-cancel"></i>
                    {{$t('l.appeal_about25')}}
                  </span>
                  <span class="inlineCol" v-if="appealinfo.status==1">
                    <i class="icon-appeal icon-appealing"></i>
                    {{$t('l.appeal_about24')}}
                  </span>
                  <span class="inlineCol" v-else-if="appealinfo.status==2">
                    <i class="icon-appeal icon-appeal-completed"></i>
                    {{$t('l.appeal_about27')}}
                  </span>
                </div>
              </el-col>
              <el-col :span="12">
                <div>
                  <span class="shortTitle">{{$t('l.appeal_about19')}}</span>
                  <div class="pictrueBox">
                    <span class="pictrue" v-for="item in appealinfo.materials" :key="item.id">
                      <img :src="item" alt />
                    </span>
                  </div>
                </div>
              </el-col>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import { api } from "@/api/api";
import OtherHeader from "@/components/otherHeader";
import Footer from "@/components/footer";

export default {
  components: {
    OtherHeader,
    Footer
  },
  data() {
    return {
      isSeller: false,
      orderinfo: {
        orderNo: "",
        another: "",
        currencyCode: "",
        legalCurrencyCode: "",
        orderAmount: "",
        quantity: "",
        price: "",
        orderType: ""
      },
      appealinfo: {
        title: "",
        descr: "",
        materials: "",
        initiate: ""
      }
    };
  },
  async created() {
    this.getOrderDetail();
    this.getAppealInfo();
  },
  methods: {
    // 获取订单详情
    async getOrderDetail() {
      let res = await api.orderDetail({
        orderNo: this.$route.params.orderNo
      });
      let { code, data, msg } = res.data;

      if (code == 0) {
        Object.assign(this.orderinfo, data);
        this.isSeller = data.orderType == 2 || data.orderType == 3;
      } else {
        this.$layer.msg(msg);
      }
    },
    // 获取申诉详情
    async getAppealInfo() {
      let materials = "";
      let res = await api.getAppeal({
        orderNo: this.$route.params.orderNo
      });
      let { code, data, msg } = res.data;

      if (code == 0) {
        if (data.materials) {
          materials = data.materials.split(",");
        }
        Object.assign(this.appealinfo, data, { materials: materials });
      } else {
        this.$layer.msg(msg);
      }
    }
  },
  mounted() {}
};
</script>
<style lang="less" scoped>
.c2cTrade {
  background-color: #f7f8fc;
  position: absolute;
  min-height: 100%;
  width: 100%;
  padding-top: 100px;
  
  .mainSection {
    width: 1200px;
    margin: 20px auto 0;
    height: 1060px;
    padding-bottom: 160px;
    box-sizing: border-box;
  }
  .inner {
    background-color: #fff;
    padding: 60px;
    height: 100%;
    box-sizing: border-box;

    > .title {
      font-size: 18px;
      font-weight: 600;
      color: rgba(51, 56, 94, 1);
      line-height: 100%;
      border-left: 3px solid #2D8DFE;
      padding-left: 10px;
      margin-bottom: 18px;
      margin-left: -20px;
    }
  }
  .wid50 {
    width: 50%;
  }
  .wid20 {
    width: 20%;
  }
  .wid33 {
    width: 33.33%;
  }
  .color-completed {
    color: #0da88b;
  }
  .color-cancelled {
    opacity: 0.7;
  }
  .color-confirm {
    color: #f78900;
  }
  .color-paid {
    color: #ef5756;
  }
}

.orderBox {
  .title {
    height: 22px;
    font-size: 16px;
    font-familyA: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(51, 56, 94, 1);
    line-height: 22px;
    margin-bottom: 14px;
  }
  .boxInner {
    box-sizing: border-box;
    background-color: #f2f6fa;
    padding: 45px 0;
    font-size: 14px;
    overflow: hidden;
  }
  .boxRow {
    overflow: hidden;
    &:not(:first-child) {
      margin-top: 46px;
    }
  }
  .boxCol {
    text-align: center;
    line-height: 24px;
    box-sizing: border-box;
    color: #33385e;
  }
}

.orderSection {
  .orderHeader {
    text-align: center;
    position: relative;
    .orderTitle {
      font-size: 16px;
      color: rgba(51, 51, 51, 1);
      font-weight: 500;
      font-familyA: PingFangSC-Medium;
      > span {
        font-familyA: "Roboto Medium";
      }
    }
    .orderAmount {
      > em {
        font-size: 24px;
        font-style: normal;
        color: #2D8DFE;
      }
    }
    .orderNo {
      font-size: 14px;
      color: #33385e;
      position: absolute;
      right: 0;
      margin-top: 5px;
      > em {
        font-style: normal;
        padding-left: 8px;
      }
    }
  }
  .priceAbout {
    .titleName {
      font-size: 12px;
      color: #33385e;
      opacity: 0.5;
    }
    .tradeRate {
      font-size: 14px;
      margin-top: 10px;
      em {
        font-style: normal;
        color: #0da88b;
      }
    }
    .paybox {
      display: inline-block;
      vertical-align: middle;
      img {
        margin-top: 4px;
      }
    }
  }
  .appealAbout {
    margin-top: 52px;
    .title {
      margin-bottom: 30px;
    }
    .el-form-item__label {
      height: 20px;
      font-size: 14px;
      font-familyA: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(51, 56, 94, 1);
      line-height: 20px;
      margin-bottom: 5px;
    }

    .upload-item {
      margin-left: 39px;
    }

    .appealBtn {
      width: 390px;
      height: 40px;
      background: linear-gradient(90deg,#3360FF 0%,#04A6FE 100%);
      border-radius: 4px;
      font-size: 16px;
      color: #fff;
      text-align: center;
      margin: 18px auto;
    }
  }
  .uploadBox {
    width: 100%;
    height: 168px;
    border-radius: 4px;
    border: 1px dashed rgba(221, 224, 235, 1);
    position: relative;
    .uploadReady {
      width: 100%;
      height: 100%;
      line-height: 100%;
      text-align: center;
      img {
        padding-top: 32px;
        margin-bottom: 17px;
      }
      p {
        font-size: 16px;
        font-familyA: PingFangSC-Regular;
        font-weight: 400;
        color: #33385e;
        line-height: 24px;
      }
      .ext {
        font-size: 14px;
        font-familyA: PingFangSC-Regular;
        font-weight: 400;
        color: #33385e;
        line-height: 22px;
        opacity: 0.4;
      }
    }
    .fileImg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      background: #fff;
      text-align: center;
      line-height: 247px;
      overflow: hidden;
      img {
        max-width: 100%;
        vertical-align: middle;
      }
    }
  }
  .appealBox {
    padding: 0 44px;
    color: rgba(51, 56, 94, 1);
    overflow: hidden;
    .title {
      width: 100px;
      font-size: 14px;
      font-familyA: PingFangSC-Regular;
      font-weight: 400;
      opacity: 0.5;
    }
    .shortTitle {
      font-size: 14px;
      font-familyA: PingFangSC-Regular;
      font-weight: 400;
      opacity: 0.5;
      margin-right: 20px;
    }
    .inlineCol {
      display: table-cell;
      height: 50px;
      padding-left: 20px;
    }
    .pictrueBox {
      display: inline-block;
      vertical-align: top;
    }
    .pictrue {
      &:not(:first-child) {
        margin-left: 10px;
      }
      img {
        width: 130px;
        height: 130px;
      }
    }
    .icon-appeal {
      display: inline-block;
      vertical-align: middle;
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }
    .icon-appealing {
      background: url(../../assets/images/authing.png);
    }
    .icon-appeal-cancel {
      background: url(../../assets/images/authCancel.png);
    }
    .icon-appeal-completed {
      background: url(../../assets/images/authTrue.png);
    }
  }
}
</style>


